<!--
 * @Author: Charlie/刘欣玥
 * @email: 805720393@qq.com
 * @Date: 2022-07-28 15:40:28
-->
<template>
  <div class="app-container">
    <!--工具栏-->
    <div class="head-container">
      <!-- <el-date-picker class="marginleft" v-model="query.value1" type="datetimerange" range-separator="至"
        start-placeholder="开始日期" end-placeholder="结束日期">
      </el-date-picker> -->
      <el-input class="marleft" v-model="query.value" clearable placeholder="请输入行业名称" />
     <el-button type="success" icon="el-icon-search" size="mini" @click="toQuery">搜索</el-button>
    </div>
    <!--表格渲染-->
      <el-tabs v-model="activeName" @tab-click="handleClick">
    <el-tab-pane label="欢乐购商城" name="first">
          <el-table :data="videoData" style="width: 100%" height="700px">
   <el-table-column prop="description" label="ID"/>

          <el-table-column prop="status" label="状态">
        <template slot-scope="scope">
          {{ scope.row.status === 1 ? '已开通' : '待审核' }}
        </template>
      </el-table-column>

      <el-table-column prop="title" label="店铺名称" />
      <el-table-column prop="title" label="联系人" />
      <el-table-column prop="title" label="手机号码" />
      <el-table-column prop="title" label="省市区" />
      <el-table-column prop="createTime" label="申请时间" />
         
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
            <!-- @click="handleEdit(scope.$index, scope.row)" -->
          <el-button size="mini" @click="Edit(scope.row)">详情</el-button>
          <el-button size="mini" v-if="scope.row.status=1" @click="Edit(scope.row)">审核</el-button>
        
        </template>
      </el-table-column>
    </el-table>
    </el-tab-pane>
    <el-tab-pane label="社群商城" name="second">
  <el-table :data="videoData" style="width: 100%" height="700px">
      <el-table-column prop="description" label="ID"/>

      <el-table-column prop="title" label="状态" />

      <el-table-column prop="title" label="店铺名称" />
   
      <el-table-column prop="description" label="提点">
        <template slot-scope="scope">
          <p>{{ scope.row.viewCount }}</p>
        </template>
      </el-table-column>
      <!-- <el-table-column prop="status" label="状态">
        <template slot-scope="scope">
          {{ scope.row.status === 1 ? '上架' : '下架' }}
        </template>
      </el-table-column> -->

      <el-table-column prop="createTime" label="创建时间" />
      <el-table-column prop="viewCount" label="排序" />
          <el-table-column label="是否显示" align="center" prop="status" width="150">
        <template slot-scope="scope">
          <el-switch v-model="scope.row.viewCount" active-color="#409EFF" inactive-color="#F56C6C" active-text="是"
            inactive-text="否" :active-value="1" :inactive-value="0" @change="handbtn(scope.row, scope.row.status)">
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
            <!-- @click="handleEdit(scope.$index, scope.row)" -->
          <el-button size="mini" @click="Edit(scope.row)">编辑</el-button>
          <el-button size="mini" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    </el-tab-pane>
   
  </el-tabs>
  
    <Dialog ref="dialog" />
    <!--分页组件-->
    <el-pagination @size-change="sizeChange($event, 'VIP')" @current-change="pageChange($event, 'VIP')"
      :page-sizes="[1, 10, 20, 30, 40]" layout="total,sizes, prev, pager, next" :total="videoTotal">
    </el-pagination>
  </div>
</template>

<script>
import Dialog from './component/dialog.vue'
import { Tablelist, findlist } from "@/api/yxSystemConfig";
export default {
  name: "viedoIndex",
  data() {
    return {
           activeName: 'first',
      query: {
        value: "",
        value1: [],
        endTime: "",
        pageNum: 1,
        pageSize: 10,
      }, //搜索
      loading: false, //加载loading
      videoData: [], //短视频列表

      videoTotal: 0,
      // picked: 'one'
  

    };
  },
  watch:{

  },
  components:{
Dialog
  },
  created() {

  },
  mounted() {
    this.Tablelists();
  },
 
  methods: {
   handleClick(tab, event) {
        console.log(tab, event);
      },
  
    add(row){
				this.$refs.dialog.dialogVisible=true
                  this.$nextTick(()=>{
					//新增时
                    this.$refs.dialog.formInline=""
                    console.log("======",this.$refs.dialog.formInline);
                  })
			},
   Edit(row){
				this.$refs.dialog.dialogVisible2=true
                  this.$nextTick(()=>{
                  this.$refs.dialog.formInline.title=row.title
					this.$refs.dialog.formInline.viewCount=row.viewCount
					this.$refs.dialog.formInline.status=row.status
                console.log("99999999",row);
				
                  })
			},
        handbtn(row, index) {
      console.log(row.viewCount);
      if (row.viewCount == 1) {
        row.check = "是";
      } else {
        row.check = "否";
      }
      this.$confirm(
        '此操作将改变为 "' + row.check + '" ' + "的状态" + ", 是否继续？",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      ).then(() => {
        if (row.viewCount == 1) {
          row.viewCount === 0;

        //   updateById({ id: row.id, status: row.status })
        //     .then((res) => {
        //       console.log("row.status == 1");
        //       console.log(row.status);
        //       console.log(res);
        //     })
        //     .catch((err) => {
        //       console.log(err.response.data.message);
        //     });
        } else if (row.viewCount == 0) {
          row.viewCount === 1;

        //   updateById({ id: row.id, status: row.status })
        //     .then((res) => {
        //       console.log("row.status == 0");
        //       console.log("0", row.status);

        //       console.log(res);
        //     })
        //     .catch((err) => {
        //       console.log(err.response.data.message);
        //     });
        }
      })
        .catch((err) => {
          row.viewCount = row.viewCount === 0 ? 1 : 0;
        })
      console.log("---", row, row.viewCount);

      console.log("-+++--", row, index);
    },
    stateFormat(row, column) {
      // console.log(row);
      if (row.auditStatus == 0) {
        return '进行中'
      } else if (row.auditStatus === 1) {
        return '通过'
      } else if (row.auditStatus === 2) {
        return '不通过'
      }
    },
    Tablelists() {
      Tablelist({
        page: this.query.pageNum,
        pageSize: this.query.pageSize,
        // productName:this.query.value,
        // createTimeEnd:this.query.value1[1],
        // createTimeStart:this.query.value1[0]
      }).then((res) => {
        console.log(res);
        this.videoData = res.data.content
        this.videoTotal = +res.data.total
        console.log("www", this.videoData, this.videoTotal);
      })
        .catch((err) => {
          console.log(err);
        })
    },
    //查找某个标题的短视频
    //  findlists() {
    //       findlist(306422251225166).then((res) => {
    //             console.log("fff", res);
    //       })
    //       .catch((err)=>{
    //         console.log(err);
    //       })
    //     },

   
    handleDelete(index, row) {
      console.log(index, row);
    },
    sizeChange(val) {
      this.pagePara.pageSize = val
      console.log(this.pagePara.pageSize);
      this.Tablelists();
    },
    pageChange(val) {
      this.pagePara.pageNum = val
      // console.log(this.pagePara.pageNum );
      this.Tablelists();
    },
    toQuery() {
      // console.log("afasf",val);
      console.log("输入的值", this.query.value);
      console.log("输入的值", this.query.value1[0]);
      setTimeout(() => {
        this.Tablelists(this.query)
      }, 1000)
    },
  },
};
</script>

<style lang="scss" scoped>
.head-container {
  display: flex;
  align-items: center; // 垂直居中

  .marginleft {
    margin-left: 10px;
  }

  .marleft {
    width: 200px;
    margin-left: auto;
    margin-right: 10px;
  }
}
</style>